<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link href="css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>
        <ul id="tree" class="ztree"></ul>
    </div>
    <button onclick="getNodesId()" type="button">
        <i class="icon iconfont ad-folder1"></i>
    </button>


    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ztree.all-ant.js"></script>
    <script type="text/javascript" src="js/antTreeByZTree.js"></script>
    <script type="text/javascript">
        var antTreeObj, AntTree;
        var model = {
            id:"0",
            name:"系统菜单",
            /*iconOpen:"icon iconfont ad-folder-open",
             iconClose:"icon iconfont ad-folder-close",
             antType:"class",*/
            iconOpen:"<i class='icon iconfont ad-folder-open' style='color:#3498DB'></i>",
            iconClose:"<i class='icon iconfont ad-folder-close' style='color:#3498DB'></i>",
            antType:"html",
            open:true,
            children:[
                {
                    id:"1",
                    name:"系统设置",
                    iconOpen:"<i class='icon iconfont ad-folder-open' style='color:#3498DB'></i>",
                    iconClose:"<i class='icon iconfont ad-folder-close' style='color:#3498DB'></i>",
                    antType:"html",
                    children:[
                        {
                            name:"菜单管理",
                            icon:"<i class='icon iconfont ad-file' style='color:#3498DB'></i>",
                            antType:"html"
                        },
                        {
                            name:"菜单操作项",
                            icon:"<i class='icon iconfont ad-file' style='color:#3498DB'></i>",
                            antType:"html"
                        }
                    ]
                },
                {
                    id:"2",
                    name:"组织管理",
                    iconOpen:"<i class='icon iconfont ad-folder-open' style='color:#3498DB'></i>",
                    iconClose:"<i class='icon iconfont ad-folder-close' style='color:#3498DB'></i>",
                    antType:"html",
                    children:[
                        {
                            name:"组织管理",
                            icon:"<i class='icon iconfont ad-file' style='color:#3498DB'></i>",
                            antType:"html"
                        },
                        {
                            name:"用户管理",
                            icon:"<i class='icon iconfont ad-file' style='color:#3498DB'></i>",
                            antType:"html"
                        },
                        {
                            name:"岗位管理",
                            icon:"<i class='icon iconfont ad-file' style='color:#3498DB'></i>",
                            antType:"html"
                        }
                    ]
                }
            ]
        }

        //节点点击事件
        function nodeClick(event, treeId, treeNode){
            console.log("节点ID====="+treeNode.id);
            console.log("节点名称====="+treeNode.name);
            console.log("节点是否打开====="+treeNode.open);
        }
        //获取复选框选中的值
        function nodeCheck(event, treeId, treeNode){
            console.log(treeNode);
            console.log("节点ID====="+treeNode.tId.split('_')[1]);
            console.log("节点名称====="+treeNode.name);
            console.log("节点是否打开====="+treeNode.open);
        }
        //节点双击事件
        function nodeDbClick(event, treeId, treeNode){
            console.log("节点ID====="+treeNode.id);
            console.log("节点名称====="+treeNode.name);
            console.log("节点是否打开====="+treeNode.open);

        }
        //获取复选框选中的id
        function getNodesId(){
            AntTree.getNodesId(antTreeObj);
        }
        //节点打开事件
        function nodeOpen(event, treeId, treeNode){
            console.log("节点ID====="+treeNode.id);
            console.log("节点名称====="+treeNode.name);
            console.log("节点是否打开====="+treeNode.open);
        }
        //节点关闭事件
        function nodeClose(event, treeId, treeNode){
            console.log("节点ID====="+treeNode.id);
            console.log("节点名称====="+treeNode.name);
            console.log("节点是否打开====="+treeNode.open);
        }

        $(document).ready(function(){
            var setting = AntTree.getSetting();
            var antNodes = AntTree.getAndNodes(model);
            antTreeObj = $.fn.zTree.init($("#tree"), setting, antNodes);
        });


    </script>
</body>
</html>